<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的主页</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1907478_ugc525gptv.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
</head>
<body>
    <!-- 导航条 -->
    <a href="#" id="back-top">Top</a>
    <script>
         $(function(){
            $('#back-top').hide();
            $(window).scroll(function() {
                if ($(window).scrollTop() > 100) {
                    $('#back-top').fadeIn(1000);
                    } else {
                        $("#back-top").fadeOut(1000);
                        }
        });
        $("#back-top").click(function() {
            $('html').animate({
                scrollTop: '0'
                }, 1000);
                return false;
                })
        })
    </script>
    <div class="nav">
        <div class="nav-center">
            <div class="nav-name">
                <img src="images/QQ图片20200622112937.jpg" alt="">
                <span>王浩男</span>
            </div>
            <div class="nav-list">
                <ul>
                    <li><a href="#aboutMe">关于我</a></li>
                    <li><a href="#mySkill">知识技能</a></li>
                    <li><a href="#myWork">作品展示</a></li>
                    <li><a href="#myTel">联系方式</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="nav-bottom1"></div>
    <div class="nav-bottom2"></div>
    <!-- 轮播图 -->
    <div class="content">
        <div id="list">
            <img src="images/01.jpg" alt="">
            <img src="images/02.jpg" alt="">
            <img src="images/03.jpg" alt="">
            <img src="images/04.jpg" alt="">
            <img src="images/05.jpg" alt="">
        </div>
        <div id="herf">
            <a target="_blank" href="https://baike.baidu.com/item/漫威电影宇宙/3706007">了解更多</a>
            <a target="_blank" href="https://www.bilibili.com/bangumi/play/ss12044">了解更多</a>
            <a target="_blank" href="https://www.cyberpunk.net/cn/zh-cn/pre-order">了解更多</a>
            <a target="_blank" href="https://yys.163.com/">了解更多</a>
            <a target="_blank" href="https://jx3.xoyo.com/zt/2014/11/21/zt/menpai/tc.html">了解更多</a>
        </div>
        <button id="prev"></button>
        <button id="next"></button>
        <div id="btns">
            <span class="current"></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script>
        $(function(){
            let index = 0;
            $("#next").click(function(){
                index++;
                if(index>4){
                    index = 0;
                }
                console.log(index);
                show(index);
            })
            $("#prev").click(function(){
                index--;
                if(index<0){
                    index = $("#list img").length-1;
                }
                console.log(index);
                show(index);
            })
            $("#btns span").click(function(){
                let i = $(this).index();
                console.log(i);
                index=i;
                show(i);
            })
            function show(index){
                $("#list img").eq(index).fadeIn().siblings().fadeOut();
                $("#herf a").eq(index).show().siblings().hide();
                $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
            }
            function play() {
                timer = setInterval(function () {
                    $("#next").click()
                }, 3000)
            }
            function stop() {
                clearInterval(timer)
            }
            $(".content").mouseover(function(){
                stop();
            })
            $(".content").mouseout(function(){
                play();
            })
            play();
        })
    </script>
    <!-- 个人简介 -->
    <div class="about" id="aboutMe">
        <div class="title">
            <span>关于我</span>
            <div></div>
        </div>
        <!-- 简介 -->
        <div class="about-introduce">
            <p>我来自湖北省荆门市，本科在读于武汉工程大学，专业是数字媒体技术。</p>
            <p>性格开朗，喜欢所有美好的事物，热衷于摄影，后期技术，目前是一名斜杠青年，是学生的同时也是一名小小的B站UP主；喜欢旅行，梦想是走遍全中国；喜欢听歌，喜欢沉浸在音乐的世界中，音乐能让我放松，给我前行的力量；喜欢吃吃喝喝，走到哪里都会先找到那个地方的好吃的在哪。</p>
        </div>
        <!-- 地图 -->
        <div id="container" tabindex="0"></div>
        <script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script>
        <script type="text/javascript">
        var map = new AMap.Map('container', {
           resizeEnable: true,
           center:[114.432291,30.461437],
           zoom:15
        });
        AMap.plugin('AMap.ToolBar',function(){
           var toolbar = new AMap.ToolBar();
           map.addControl(toolbar)
        })
    </script>
    <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
    </div>
    <!-- 知识技能 -->
    <div class="skill" id="mySkill">
        <div class="title">
            <span>知识技能</span>
            <div></div>
        </div>
        <div class="skill-computer">
            <div class="skill-title">计算机技能</div>
            <div>
                <p>HTML</p>
                <div class="html">
                    <div class="html-r"></div>
                </div>
                <p>CSS</p>
                <div class="css">
                    <div class="css-r"></div>
                </div>
                <p>JS</p>
                <div class="js">
                    <div class="js-r"></div>
                </div>
            </div>
        </div>
        <div class="skill-others">
            <div class="skill-title">其他技能</div>
            <div>
                <p>Adobe</p>
                <div class="adobe">
                    <div class="adobe-r"></div>
                </div>
                <p>Office</p>
                <div class="office">
                    <div class="office-r"></div>
                </div>
                <p>摄影</p>
                <div class="photography">
                    <div class="photography-r"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 作品展示 -->
    <div class="work" id="myWork">
        <div class="title">
            <span>作品展示</span>
            <div></div>
        </div>
        <!-- 摄影作品 -->
        <div class="work-photo-text">摄影作品</div>
        <div class="work-photo">
            <img src="images/pohto1.jpg" alt="">
            <img src="images/pohto2.jpg" alt="">
            <img src="images/pohto3.jpg" alt="">
            <img src="images/pohto4.jpg" alt="">
            <img src="images/pohto5.jpg" alt="">
            <img src="images/pohto6.jpg" alt="">
            <img src="images/pohto7.jpg" alt="">
            <img src="images/pohto8.jpg" alt="">
            <img src="images/pohto9.jpg" alt="">
            <img src="images/pohto10.jpg" alt="">
            <img src="images/pohto11.jpg" alt="">
            <img src="images/pohto12.jpg" alt="">
            <img src="images/pohto13.jpg" alt="">
            <img src="images/pohto14.jpg" alt="">
        </div>
        <!-- 视频作品 -->
        <div class="work-video-text">视频作品</div>
        <div class="work-video">
            <a target="_blank" href="https://www.bilibili.com/video/BV14J41117W1">
                <div>
                    <img src="images/video01.webp" alt=""><br>
                    <span>【高校抖肩舞】武汉工程大学版抖肩舞coincidence</span>
                </div>
            </a>
            <a target="_blank" href="https://www.bilibili.com/video/BV1jW411j7Wr">
                <div>
                    <img src="images/video02.webp" alt=""><br>
                    <span>【寒烟】未闻花名MAD 面码，我找到你了</span>
                </div>
            </a>
            <a target="_blank" href="https://www.bilibili.com/video/BV1YW411e714">
                <div>
                    <img src="images/video03.webp" alt=""><br>
                    <span>【寒烟】【燃向】速度与激情混剪 （BGM：we own it）</span>
                </div>
            </a>
            <a target="_blank" href="https://www.bilibili.com/video/BV1qx411G7po">
                <div>
                    <img src="images/video04.webp" alt=""><br>
                    <span>【新人MAD】可塑性记忆 愿你能与重要的人再次相遇</span>
                </div>
            </a>
            <a target="_blank" href="https://www.bilibili.com/video/BV1Tx411G73N">
                <div>
                    <img src="images/video05.webp" alt=""><br>
                    <span>【新人向|MAD】动漫K 伊佐那社：我可是不死的王</span>
                </div>
            </a>
            <a target="_blank" href="https://www.bilibili.com/video/BV1tx411i7xR">
                <div>
                    <img src="images/video06.webp" alt=""><br>
                    <span>【寒烟】双子 单人模式</span>
                </div>
            </a>
        </div>
        <!-- 网页作品 -->
        <div class="work-web-text">网页作品</div>
        <div class="work-web">
            <div>
                <a target="_blank" href="https://hanyaner.gitee.io/homework02">首次作业</a>
                <a target="_blank" href="https://hanyaner.gitee.io/homework5.28/">关于远大</a>
                <a target="_blank" href="https://hanyaner.gitee.io/homework6.1/">家具医生</a>
                <a target="_blank" href="https://hanyaner.gitee.io/homework6.4/">百度首页</a>
                <a target="_blank" href="https://hanyaner.gitee.io/homework6.5/">iframe</a>
                <a target="_blank" href="https://hanyaner.gitee.io/homework6.5r/">家具详情</a>
                <a target="_blank" href="https://hanyaner.gitee.io/homework6.8/">小米登录</a>
                <a target="_blank" href="https://hanyaner.gitee.io/homework6.12/">木兮地板</a>
                <a target="_blank" href="https://hanyaner.gitee.io/homework6.15/">图片轮播</a>
                <a target="_blank" href="https://hanyaner.gitee.io/homework6.18/">小米商城</a>
            </div>
        </div>
    </div>
    <!-- 联系方式 -->
    <div class="tel" id="myTel">
        <div class="title">
            <span>联系方式</span>
            <div></div>
        </div>
        <div class="tel-all">
            <div>
                <i class="iconfont icon-weibiaoti-"></i><br>
                <span>13886930696</span>
            </div>
            <div>
                <i class="qq iconfont icon-QQ"></i><br>
                <span class="qq-text">2994417906</span>
            </div>
            <div>
                <i class="weixin iconfont icon-weixin"></i><br>
                <span class="weixin-text">hanyaner404</span>
            </div>
            <div>
                <i class="bilibili iconfont icon-bilibili-fill"></i><br>
                <a target="_blank" href="https://space.bilibili.com/13686103">丿寒烟丨</a>
            </div>
        </div>
    </div>
</body>
</html>